<template>
    券标题:
    <input type="text" v-model="ff.name"/>
    适用门店
    <select v-model="ff.yewu">
                    <option value="">请选择</option>
                    <option value="河北保定">河北保定</option>
                    <option value="北京昌平">北京昌平</option>
                    <option value="河北石家庄">河北石家庄</option>
                    <option value="广州白云山">广州白云山</option>
                </select>
                <input type="button" value="查询" @click="show()"/>
    <table class="table table-border" border="1">
        <tr>
            <td>类型</td>
            <td>标题</td>
            <td>副标题</td>
            <td>图片</td>
            <td>剩余库存</td>
            <td>每人限领</td>
            <td>使用条件</td>
            <td>减免金额</td>
            <td>有效期</td>
            <td>适用业务</td>
            <td>使用须知</td>
            <td>适用门店</td>
            <td>服务电话</td>
            <td>操作</td>
        </tr>
        <tr v-for="item in info">
            <td>{{ item.type }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.descrName }}</td>
            <td>
                <img :src="item.img" style="width: 70px;height: 70px;"/>
            </td>
            <td>{{ item.num }}</td>
            <td>{{ item.xian }}</td>
            <td>￥{{ item.tiao }}</td>
            <td>￥{{ item.money }}</td>
            <td>{{ item.staTime.substring(0,10) }}-{{ item.endTime.substring(0,10) }}</td>
            <td>{{ item.yewu }}</td>
            <td>{{ item.info }}</td>
            <td>{{ item.memName }}</td>
            <td>{{ item.phone.substring(0,3) }}****{{ item.phone.substring(7,11) }}</td>
            <td>
                <input type="button" value="删除" @click="del(item.id)"/>
                <input type="button" value="修改" @click="upd(item.id)"/>
            </td>
        </tr>
    </table>
    <span>
        一共{{ ff.totalcount }}页,每页{{ ff.size }}条,当前第{{ ff.index }}/{{ ff.totalpage }}条
        <input type="button" value="首页" @click="fenye(1)"/>
        <input type="button" value="上一页" @click="fenye(ff.index-1)"/>
        <input type="button" value="下一页" @click="fenye(ff.index+1)"/>
        <input type="button" value="尾页" @click="fenye(ff.totalpage)"/>
    </span>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import axios from 'axios';
import router from '@/router';
const info=ref([{
    "id": 0,
  "name": "",
  "type": "",
  "descrName": "",
  "img": "",
  "num": 0,
  "xian": 0,
  "tiao": "",
  "money": "",
  "staTime": "",
  "endTime": "",
  "yewu": "",
  "info": "",
  "memName": "",
  "phone": "",
}])
//定义分页变量和查询变量
const ff=ref({
    index:1,
    size:2,
    totalcount:0,
    totalpage:0,
    name:"",
    yewu:""
})
onMounted(()=>{
    show();
})
//分页
const fenye=(p:number)=>{
if(p<1){
    p=1;
    alert("当前已经是第一页");
}
if(p>ff.value.totalpage){
    p=ff.value.totalpage;
    alert("当前已经是最后页");
}
ff.value.index=p;
show();
}
//显示
const show=()=>{
    axios.get("https://localhost:7191/api/Members/userlist?name="+ff.value.name+"&memname="+ff.value.yewu+"&index="+ff.value.index+"&size="+ff.value.size).then(res=>{
        info.value=res.data.pagedate;
        ff.value.totalcount=res.data.totalcount;
        ff.value.totalpage=res.data.pagecount;
    })
}
//删除
const del=(id:number)=>{
            if(confirm("确定删除吗?")){
                axios.delete("https://localhost:7191/api/Members/userdel?id="+id).then(res=>{
            if(res.data>0){
                alert('成功');
                show();
            }
            else{
                alert('失败');
            }
        })
    }
}
///修改
const upd=(id:number)=>{
router.push("/useradd?id="+id);
}
</script>

<style scoped>

</style>